<template>
	<picker-view v-if="visible" class="picker-view" :indicator-style="indicatorStyle" :value="defaultValue" @change="bindChange">
		<picker-view-column>
			<view class="item" v-for="(item,index) in provinceList" :key="index">{{item.label}}</view>
		</picker-view-column>
		<picker-view-column>
			<view class="item" v-for="(item,index) in cityList" :key="index">{{item.label}}</view>
		</picker-view-column>
		<picker-view-column>
			<view class="item" v-for="(item,index) in areaList" :key="index">{{item.label}}</view>
		</picker-view-column>
	</picker-view>
</template>

<script>
	import regions from "../json/region";
	export default {
		props: {
			value: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				provinceList: [],
				cityList: [],
				areaList: [],
				defaultValue: [],
				indicatorStyle: `height: 50px;`,
				visible: false
			}
		},
		mounted() {
			let arr = this.value ? this.value.split("/") : [];
			this.provinceList = regions;
			let provinceIndex = 0;
			let cityIndex = 0;
			let creaIndex = 0;
			if(arr.length <= 3 && arr.length !== 0){
				provinceIndex = this.getIndex(this.provinceList, arr[0]);
				this.cityList = this.provinceList[provinceIndex].children || []
				if(arr.length === 1){
					this.areaList = this.cityList[0].children || []
				}
				if(arr.length === 2 || arr.length === 3){
					cityIndex = this.getIndex(this.cityList, arr[1]);
					this.areaList = this.cityList[cityIndex].children || [];
				}
				if(arr.length === 3){
					creaIndex = this.getIndex(this.areaList, arr[2]);
				}
			}else{
				this.cityList = this.provinceList[0].children || []
				this.areaList = this.cityList[0].children || []
			}
			this.defaultValue = [provinceIndex, cityIndex, creaIndex]
			this.visible = true
		},
		methods: {
			getValue(){
				let arr = [];
				let province = this.provinceList[this.defaultValue[0]];
				let city = this.cityList[this.defaultValue[1]];
				let area = this.areaList[this.defaultValue[2]];
				if(province){
					arr.push(province.label)
				}
				if(city){
					arr.push(city.label)
				}
				if(area){
					arr.push(area.label)
				}
				return arr.join("/");
			},
			bindChange: function(e) {
				let val = e.detail.value
				if(val[0] !== this.defaultValue[0]){
					this.cityList = this.provinceList[val[0]].children || []
					this.areaList = this.cityList[0].children || []
					this.defaultValue = [val[0], 0, 0];
					return
				}
				if(val[1] !== this.defaultValue[1]){
					this.areaList = this.cityList[val[1]].children || []
					this.defaultValue = [val[0], val[1], 0];
					return
				}
				this.defaultValue = [val[0], val[1], val[2]];
			},
			getIndex(arr, val){
				for (var i = 0; i < arr.length; i++) {
					if(arr[i].label === val){
						return i
					}
				}
				return 0
			},
			getMonthDays(year, month){
				let y = Number(year)
				let m = Number(month)
				let day30 = [4,6,9,11]
				let day31 = [1,3,5,7,8,10,12]
				for (var i = 0; i < day30.length; i++) {
					if(day30[i] === m){
						return 30
					}
				}
				for (var i = 0; i < day31.length; i++) {
					if(day31[i] === m){
						return 31
					}
				}
				if (y % 4 == 0 && y % 100 != 0 || y % 400 == 0) {
				    return 29
				} else {
				    return 28
				}
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.picker-view {
		width: 100%;
		height: 500rpx;
		margin-top: 20rpx;
		.item {
			height: 50px !important;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
	}
</style>
